// 导入必要的模块
import render_helper from "./render_helper.mjs";
import thin_render from "./thin_render.mjs";
import datarover from "./datarover.mjs";
import { confirm } from "./dialog.mjs";
import { thin } from "../thin3.mjs";
import validate from "./validate.mjs";
import { nearest_data } from "./nearest.mjs";

// 表单视图模板函数：创建和管理表单界面
export default function formview_template(container, template) {
  // 创建formview元素并添加到容器中
  let formview = document.createElement("formview");
  container.appendChild(formview);

  // 设置数据源：优先使用template.data，否则通过datapath获取数据
  let data = template.data || datarover(container, template.datapath);
  if (data) formview.thin_data = data;

  // 设置视图模式：可以是函数或字符串，默认为"read"模式
  if (typeof template.mode === "function") {
    formview.thin_viewmode =
      template.mode({
        container,
        template,
        data: nearest_data(container),
      }) || "read";
  } else formview.thin_viewmode = template.mode || "read";

  render_helper(formview, template);

  if (template.allrequired) {
    formview.thin_allrequired = true;
  }

  // 定义表单视图的渲染函数
  formview.thin_render = function () {
    thin(formview).empty();
    thin_render(formview, template.formview);
    // 如果定义了保存、插入或删除操作，则渲染操作按钮
    if (template.onsave || template.oninsert || template.ondelete) {
      thin_render(formview, {
        // 普通模式下的按钮块
        block: [
          {
            button: "delete",
            click: (e) => {
              confirm("是否确认删除?").confirmed((d) => {
                if (template.ondelete) template.ondelete(e);
              });
            },
            when: typeof template.ondelete === "function",
          },
          {
            button: "edit",
            click: (e) => {
              e.editmode();
            },
            when: typeof template.onsave === "function",
          },
        ],
        // 插入模式下的按钮配置
        insert: [
          {
            button: "cancel",
            click: (e) => {
              confirm("是否放弃保存数据？")
                .confirmed((data) => {
                  if (template.oncancel) template.oncancel(e);
                })
                .cancelled(() => {
                  e.done();
                });
            },
          },
          {
            button: "add",
            click: (e) => {
              // 数据验证处理
              validate({
                container: formview,
                ignoreinsertrow: true,
                valid: (p) => {
                  console.log(p);
                  confirm("是否保存数据")
                    .confirmed(() => {
                      if (template.oninsert) template.oninsert(e);
                      else template.onsave(e);
                    })
                    .cancelled(() => {
                      e.done();
                    });
                },
                invalid: (p) => {
                  e.done();
                },
              });
            },
          },
        ],
        // 编辑模式下的按钮配置
        edit: [
          {
            button: "cancel",
            click: (e) => {
              e.readmode();
            },
          },
          {
            button: "save",
            click: (e) => {
              // 保存前的数据验证
              validate({
                container: formview,
                ignoreinsertrow: true,
                valid: (p) => {
                  console.log(p);
                  confirm("是否保存数据?")
                    .confirmed((d) => {
                      template.onsave(e);
                    })
                    .cancelled((d) => {
                      e.done();
                    });
                },
                invalid: (p) => {
                  e.done();
                },
              });
            },
          },
        ],
        // 命令按钮固定底部的样式配置
        style: template.commandfixbottom
          ? {
              display: "block",
              position: "sticky",
              bottom: 0,
              "background-color": "white",
              "border-top": "1px solid #e0e0e0",
              "padding-top": "5px",
            }
          : undefined,
      });
    }
  };

  // 执行初始渲染
  formview.thin_render();
}
